// 场景管理相关函数 - 第3部分

// 全局变量定义 - 注意：draggedItem和draggedItemType已在scene_functions.js中定义
let stepCounter = 0;

// 全局错误处理
window.addEventListener('error', function (e) {
    console.error('JavaScript错误:', e.message, '文件:', e.filename, '行号:', e.lineno);
});

window.addEventListener('unhandledrejection', function (e) {
    console.error('未处理的Promise拒绝:', e.reason);
});

// 全局存储API数据
window.apis = {};

// 加载API列表（用于场景编辑器）
function loadSceneApiList() {
    return new Promise((resolve, reject) => {
        $.ajax({
            url: '/api/data',
            method: 'GET',
            data: {
                per_page: 1000 // 加载所有API
            },
            success: function (response) {
                // 存储完整的API数据到全局变量
                if (response.apis && Array.isArray(response.apis)) {
                    response.apis.forEach(api => {
                        window.apis[api.id] = api;
                    });
                }

                renderSceneApiList(response.apis);
                console.log('API列表加载完成，初始化拖拽功能...');

                // 确保在API列表加载完成后初始化拖拽功能
                if (typeof initDragAndDrop === 'function') {
                    initDragAndDrop();
                } else {
                    console.error('initDragAndDrop函数未定义');
                }

                resolve(response);
            },
            error: function (error) {
                console.error('加载API列表失败:', error);
                showToast('error', '加载API列表失败');
                reject(error);
            }
        });
    });
}

// 渲染API列表（用于场景编辑器）
// 渲染场景API列表
function renderSceneApiList(apis) {
    console.log('渲染场景API列表:', apis);
    const apiList = $('#api-list');
    apiList.empty();

    // 添加调试日志
    console.log('API列表容器:', apiList);
    console.log('API数量:', apis ? apis.length : 0);

    if (!apis || apis.length === 0) {
        apiList.html('<div class="alert alert-info">暂无API数据</div>');
        console.log('API列表为空，显示提示信息');
        return;
    }

    // 添加调试信息
    apiList.append('<div class="alert alert-info">API数量: ' + (apis ? apis.length : 0) + '</div>');

    // 按分组组织API
    const apiGroups = {};
    apis.forEach(api => {
        const group = api.group || '未分组';
        if (!apiGroups[group]) {
            apiGroups[group] = [];
        }
        apiGroups[group].push(api);
    });

    console.log('API分组:', apiGroups);

    // 渲染每个分组
    Object.keys(apiGroups).forEach(group => {
        const groupItem = $(`
            <div class="api-group-item mb-3">
                <div class="card-header">
                    <h6 class="mb-0">${group}</h6>
                </div>
                <div class="list-group list-group-flush api-group" data-group="${group}">
                </div>
            </div>
        `);

        const groupList = groupItem.find('.api-group');

        // 渲染API
        apiGroups[group].forEach(api => {
            console.log('渲染API:', api);
            const body = api.params || null;
            const headers = api.headers || null;

            const bodyStr = body ? JSON.stringify(body) : null;
            const headersStr = headers ? JSON.stringify(headers) : null;
            console.log(' body:', bodyStr, 'headers:', headersStr);

            const methodBadgeClass = {
                'GET': 'bg-success',
                'POST': 'bg-primary',
                'PUT': 'bg-warning',
                'DELETE': 'bg-danger',
                'PATCH': 'bg-info'
            };

            const apiItem = $(`
                <div class="list-group-item api-item" draggable="true" data-id="${api.id}" data-name="${api.name}" data-method="${api.method}" data-url="${api.path}">
                    <div class="d-flex justify-content-between align-items-center">
                        <div>
                            <span class="badge ${methodBadgeClass[api.method] || 'bg-secondary'}">${api.method}</span>
                            <span class="ms-2">${api.name}</span>
                        </div>
                        <div>
                            <button class="btn btn-sm btn-success add-api-to-scene" data-id="${api.id}" data-name="${api.name}" data-method="${api.method}" data-url="${api.path}"
                            data-params="${bodyStr}"  data-headers="${headersStr}"
                            title="添加到场景">
                                <i class="fas fa-plus"></i>
                            </button>
                        </div>
                    </div>
                </div>
            `);

            groupList.append(apiItem);
        });

        apiList.append(groupItem);
    });

    console.log('API列表渲染完成');

    // 初始化API拖放
    initApiDragAndDrop();

    // 绑定添加API到场景的按钮点击事件
    bindAddApiToSceneEvent();
}


// 获取通过ID获取api信息
function getApiInfoById(apiId) {
    return new Promise((resolve, reject) => {
        $.ajax({
            url: `/api/${apiId}`,
            method: 'GET',
            success: function (response) {
                if (response.success) {
                    const api = response.api;
                    console.log('获取到的API详情:', api);
                    resolve(api); // 成功时调用 resolve
                } else {
                    showToast('error', response.message || '获取API详情失败');
                    reject(new Error(response.message || '获取API详情失败'));
                }
            },
            error: function (error) {
                console.error('获取API详情失败:', error);
                showToast('error', '获取API详情失败');
                reject(error);
            }
        });
    });
}

// 绑定添加API到场景的按钮点击事件
function bindAddApiToSceneEvent() {
    console.log('绑定添加API到场景的按钮点击事件');
    $(document).off('click.add-api').on('click.add-api', '.add-api-to-scene', function (e) {
        console.log('点击了添加API到场景按钮');
        e.preventDefault();
        e.stopPropagation();

        const button = $(this);
        console.log('按钮元素:', button);

        // 获取按钮上的data属性
        const apiId = button.data('id');
        const buttonName = button.data('name');
        const buttonMethod = button.data('method');
        const buttonUrl = button.data('url');

        console.log('按钮上的API数据:', { apiId, buttonName, buttonMethod, buttonUrl });

        // 验证createApiStep函数是否存在
        if (typeof createApiStep !== 'function') {
            console.error('createApiStep函数未定义');
            showToast('error', '添加API步骤失败');
            return;
        }

        // 调用getApiInfoById获取API详情，并将所有依赖apiData的操作移到then回调内部
        getApiInfoById(apiId)
            .then(api => {
                console.log('成功获取API:', api);
                
                // 新的数据获取 - 现在在异步回调内部安全地使用api数据
                const name = api ? api.name || buttonName : buttonName;
                const method = api ? api.method || buttonMethod : buttonMethod;
                let url = api ? api.path || buttonUrl : buttonUrl;
        
                // 提取请求体和请求头信息
                const body = api ? api.body : null;
                const headers = api ? api.headers : null;
        
                console.log('准备创建API步骤，使用数据:', { name, apiId, method, url, body, headers });
        
                // 调用createApiStep创建API步骤，传入请求体和请求头
                const apiStep = createApiStep(name, apiId, buttonName, method, url, body, headers);
        
                // 确保URL字段正确设置
                if (url) {
                    apiStep.find('.step-url').val(url);
                    console.log('设置URL值:', url);
                } else {
                    console.error('URL值为空，使用默认值');
                    apiStep.find('.step-url').val('/api/default');
                }
        
                console.log('创建的API步骤:', apiStep);
        
                // 查找或创建步骤容器 - 简化版但更健壮的方法
                let stepsContainer = null;
        
                // 方式1: 首先尝试直接在模态框中查找步骤容器
                stepsContainer = $('#addEditModal').find('#steps-container');
        
                // 方式2: 如果没有找到，查找scene-steps并在其中创建容器
                if (stepsContainer.length === 0) {
                    console.log('步骤容器不存在，尝试在scene-steps中创建');
                    const sceneSteps = $('#addEditModal').find('#scene-steps');
        
                    if (sceneSteps.length > 0) {
                        console.log('找到scene-steps容器，创建步骤容器');
                        sceneSteps.append('<div id="steps-container" class="steps-container"></div>');
                        stepsContainer = sceneSteps.find('#steps-container');
                    }
                }
        
                // 方式3: 如果还是没有找到，在模态框的内容区域直接创建
                if (stepsContainer.length === 0) {
                    console.log('scene-steps也不存在，在模态框中创建步骤容器');
                    const modalBody = $('#addEditModal').find('.modal-body');
        
                    if (modalBody.length > 0) {
                        console.log('找到模态框内容区域，创建步骤容器');
                        // 在模态框中创建一个明显的步骤容器区域
                        const stepsArea = $(
                            '<div class="mt-4 p-3 bg-light rounded border border-dashed">\n' +
                            '  <h5 class="text-primary">场景步骤</h5>\n' +
                            '  <div id="steps-container" class="steps-container mt-2"></div>\n' +
                            '</div>'
                        );
                        modalBody.append(stepsArea);
                        stepsContainer = modalBody.find('#steps-container');
                    }
                }
        
                // 方式4: 最后尝试一个绝对不会失败的方法 - 创建一个可见的容器
                if (stepsContainer.length === 0) {
                    console.log('所有尝试都失败，创建一个全局可见的步骤容器');
                    // 确保没有重复的容器
                    $('#global-steps-container').remove();
        
                    // 创建一个全局可见的步骤容器
                    const globalContainer = $(
                        '<div id="global-steps-container" class="p-4 bg-white border border-primary rounded shadow-lg m-4\n' +
                        '  position: relative !important; z-index: 1000 !important;">' +
                        '  <h4>场景步骤</h4>\n' +
                        '  <div id="steps-container" class="steps-container mt-2"></div>\n' +
                        '</div>'
                    );
        
                    // 添加到页面中
                    $('body').append(globalContainer);
                    stepsContainer = globalContainer.find('#steps-container');
                    console.log('已创建全局可见的步骤容器');
                }
        
                // 确保有容器后，添加API步骤
                if (stepsContainer.length > 0) {
                    console.log('找到或创建了步骤容器，添加API步骤');
        
                    // 添加API步骤
                    stepsContainer.append(apiStep);
        
                    // 更新步骤序号 - 检查函数是否存在
                    if (typeof updateStepNumbers === 'function') {
                        updateStepNumbers();
        
                        // 为新添加的步骤绑定折叠功能
                        if (typeof bindStepCollapseFunctionality === 'function') {
                            bindStepCollapseFunctionality();
                        }
                    }
        
                    // 显示成功提示
                    if (typeof showToast === 'function') {
                        showToast('success', `已添加API步骤: ${name || '未命名API'}`);
                    }
                } else {
                    console.error('无法创建任何步骤容器');
                    if (typeof showToast === 'function') {
                        showToast('error', '添加API步骤失败：无法创建步骤容器');
                    }
                }
            })
            .catch(error => {
                console.error('获取API信息失败:', error);
                if (typeof showToast === 'function') {
                    showToast('error', '获取API信息失败');
                }
            });
    });
}

// 初始化API拖放
function initApiDragAndDrop() {
    console.log('初始化API拖放功能');

    // 使用事件委托，确保动态添加的元素也能绑定事件
    $(document).off('dragstart.api').on('dragstart.api', '.api-item', function (e) {
        console.log('API拖拽开始:', $(this).data('name'));
        console.log('拖拽元素:', this);
        draggedItem = this;
        draggedItemType = 'api';
        console.log('设置draggedItemType:', draggedItemType);

        // 设置拖动数据 - 包含完整的API信息
        const apiId = $(this).data('id');
        let dragData = {
            type: 'api',
            id: apiId,
            name: $(this).data('name'),
            method: $(this).data('method'),
            url: $(this).data('url')
        };

        // 如果window.apis中有完整的API信息，包含请求体和请求头
        if (window.apis && window.apis[apiId]) {
            const apiDetails = window.apis[apiId];
            dragData.body = apiDetails.body || null;
            dragData.headers = apiDetails.headers || null;
            console.log('拖拽数据包含完整API信息:', dragData);
        } else {
            console.log('拖拽数据使用基本API信息:', dragData);
        }

        try {
            if (e.originalEvent && e.originalEvent.dataTransfer) {
                e.originalEvent.dataTransfer.setData('text/plain', JSON.stringify(dragData));
                console.log('成功设置拖拽数据:', dragData);
            } else {
                console.error('无法访问dataTransfer对象:', e);
            }
        } catch (error) {
            console.error('设置拖拽数据时出错:', error);
        }

        setTimeout(() => {
            $(this).addClass('dragging');
        }, 0);
    });

    $(document).off('dragend.api').on('dragend.api', '.api-item', function () {
        console.log('API拖拽结束');
        $(this).removeClass('dragging');
        // 延迟重置，确保drop事件能够正常处理
        setTimeout(() => {
            draggedItem = null;
            draggedItemType = null;
            console.log('重置draggedItemType:', draggedItemType);
        }, 100);
    });
}

// 初始化拖放功能
function initDragAndDrop() {
    console.log('初始化拖放功能');

    // 检查步骤容器是否存在
    const stepsContainer = $('#steps-container');
    console.log('步骤容器是否存在:', stepsContainer.length > 0);
    console.log('步骤容器元素:', stepsContainer[0]);

    // 为所有步骤添加折叠功能
    if (typeof bindStepCollapseFunctionality === 'function') {
        bindStepCollapseFunctionality();
    }

    // 为场景内的步骤元素添加拖拽开始事件处理
    $(document).off('dragstart.step').on('dragstart.step', '.step-item', function (e) {
        console.log('步骤拖拽开始:', $(this).find('.step-name').text());
        console.log('拖拽步骤元素:', this);
        draggedItem = this;
        draggedItemType = 'step';
        console.log('设置draggedItemType为step:', draggedItemType);

        // 设置拖动数据
        try {
            if (e.originalEvent && e.originalEvent.dataTransfer) {
                const stepData = {
                    type: 'step',
                    id: $(this).data('id') || null,
                    name: $(this).find('.step-name').text()
                };
                e.originalEvent.dataTransfer.setData('text/plain', JSON.stringify(stepData));
                console.log('成功设置步骤拖拽数据:', stepData);
            } else {
                console.error('无法访问dataTransfer对象:', e);
            }
        } catch (error) {
            console.error('设置步骤拖拽数据时出错:', error);
        }

        setTimeout(() => {
            $(this).addClass('dragging');
        }, 0);
    });

    // 为场景内的步骤元素添加拖拽结束事件处理
    $(document).off('dragend.step').on('dragend.step', '.step-item', function () {
        console.log('步骤拖拽结束');
        $(this).removeClass('dragging');
        // 注意：不要在这里重置draggedItem和draggedItemType，因为可能需要在drop事件中使用
        // 这些值将在后续操作中由其他逻辑处理
    });

    // 场景步骤区域允许放置
    $(document).off('dragover.scene').on('dragover.scene', '#steps-container', function (e) {
        e.preventDefault();
        console.log('拖拽悬停在场景步骤区域');
        console.log('draggedItemType:', draggedItemType);
        console.log('当前目标元素:', this);
        // 防止默认的拖放行为
        if (e.target === this || $(e.target).hasClass('step-placeholder')) {
            $(this).addClass('border-2 border-primary');
        }
    });

    // 拖动离开场景步骤区域
    $(document).off('dragleave.scene').on('dragleave.scene', '#steps-container', function () {
        $(this).removeClass('border-2 border-primary');
        // 移除所有占位符
        $('.step-placeholder').remove();
    });

    // 拖动经过步骤元素时的事件 - 用于排序
    $(document).off('dragover.step').on('dragover.step', '#scene-steps .step-item', function (e) {
        e.preventDefault();
        e.stopPropagation();

        console.log('准备调用getDragAfterElement');
        const container = $('#steps-container');
        console.log('步骤容器jQuery对象:', {
            length: container.length,
            selector: container.selector,
            isEmpty: container.is(':empty')
        });

        const afterElement = getDragAfterElement(container, e.clientY);

        // 移除之前的占位符
        $('.step-placeholder').remove();

        // 创建占位符
        const placeholder = $('<div class="step-placeholder bg-primary bg-opacity-20 mb-3 h-8 rounded"></div>');

        if (afterElement) {
            $(afterElement).before(placeholder);
            console.log('占位符已放置在元素前');
        } else {
            if (container.length > 0) {
                container.append(placeholder);
                console.log('占位符已添加到容器末尾');
            } else {
                console.error('步骤容器不存在，无法添加占位符');
            }
        }
    });

    // 场景步骤区域放置事件
    $(document).off('drop.scene').on('drop.scene', '#steps-container', function (e) {
        e.preventDefault();
        $(this).removeClass('border-2 border-primary');
        console.log('在场景步骤区域放置 - 事件触发');
        console.log('draggedItemType:', draggedItemType);
        console.log('放置目标元素:', this);

        // 检查全局变量是否存在
        if (typeof draggedItemType === 'undefined') {
            console.error('draggedItemType变量未定义');
            // 尝试从window对象获取或初始化
            window.draggedItemType = null;
            draggedItemType = window.draggedItemType;
        }

        if (draggedItemType === null) {
            console.warn('draggedItemType为null，尝试检测拖放内容');

            // 检查是否是拖动现有步骤
            if (e.originalEvent && e.originalEvent.dataTransfer) {
                const data = e.originalEvent.dataTransfer.getData('text/plain');
                if (data) {
                    try {
                        const dragData = JSON.parse(data);
                        if (dragData.type) {
                            draggedItemType = dragData.type;
                            console.log('从拖放数据中恢复draggedItemType:', draggedItemType);
                        }
                    } catch (error) {
                        console.error('解析拖放数据失败:', error);
                    }
                }
            }

            // 如果仍然为null，检查draggedItem元素
            if (draggedItemType === null && draggedItem && $(draggedItem).hasClass('step-item')) {
                draggedItemType = 'step';
                console.log('检测到拖动步骤元素，设置draggedItemType为step');
            }

            // 仍然无法确定类型，给出提示
            if (draggedItemType === null) {
                console.error('无法确定拖放类型，操作取消');
                // 移除占位符
                $('.step-placeholder').remove();
                return;
            }
        }

        // 移除占位符
        const placeholder = $('.step-placeholder');

        if (draggedItemType === 'api') {
            try {
                if (e.originalEvent && e.originalEvent.dataTransfer) {
                    const data = e.originalEvent.dataTransfer.getData('text/plain');
                    console.log('接收到的数据:', data);

                    if (data) {
                        try {
                            const apiData = JSON.parse(data);
                            console.log('接收API数据:', apiData);

                            // 验证createApiStep函数是否存在
                            if (typeof createApiStep !== 'function') {
                                console.error('createApiStep函数未定义');
                                // 移除占位符
                                $('.step-placeholder').remove();
                                return;
                            }

                            // 创建API步骤
                            const apiStep = createApiStep(apiData.name, apiData.id, apiData.name, apiData.method, apiData.url);
                            console.log('创建的API步骤:', apiStep);

                            // 请求体和请求头已在createApiStep中处理

                            // 验证步骤容器是否存在
                            const stepsContainer = $('#steps-container');
                            console.log('步骤容器是否存在:', stepsContainer.length > 0);

                            if (stepsContainer.length > 0) {
                                // 隐藏提示信息
                                $('#scene-steps').find('.alert-info').hide();

                                // 添加到步骤列表（考虑占位符位置）
                                if (placeholder.length > 0) {
                                    placeholder.before(apiStep);
                                } else {
                                    stepsContainer.append(apiStep);
                                }

                                console.log('API步骤添加到步骤容器');

                                // 更新步骤序号
                                updateStepNumbers();

                                // 为新添加的步骤绑定折叠功能
                                if (typeof bindStepCollapseFunctionality === 'function') {
                                    bindStepCollapseFunctionality();
                                }
                                console.log('API步骤添加完成');
                            } else {
                                console.error('步骤容器不存在');
                            }
                        } catch (jsonError) {
                            console.error('解析拖拽JSON数据时出错:', jsonError);
                        }
                    } else {
                        console.error('接收到的拖拽数据为空');
                    }
                } else {
                    console.error('无法访问dataTransfer对象:', e);
                }
            } catch (error) {
                console.error('处理拖拽放置事件时出错:', error);
            }
        } else if (draggedItemType === 'step') {
            // 支持步骤拖拽排序
            const draggedElement = $(draggedItem);

            if (placeholder.length > 0) {
                // 如果有占位符，将元素放在占位符位置
                placeholder.before(draggedElement);
            } else if (draggedElement.parent().attr('id') !== 'steps-container') {
                // 如果元素不在主容器中，则添加到主容器
                stepsContainer.append(draggedElement);
            }

            // 更新步骤序号
            updateStepNumbers();
        } else {
            console.log('拖拽类型不是API或步骤:', draggedItemType);
        }

        // 移除占位符
        $('.step-placeholder').remove();
    });

    // 条件和循环步骤的子步骤区域允许放置
    $(document).off('dragover.children').on('dragover.children', '.step-children', function (e) {
        e.preventDefault();
        e.stopPropagation();
        $(this).addClass('border-2 border-primary');
    });

    // 条件和循环步骤的子步骤区域拖拽离开
    $(document).off('dragleave.children').on('dragleave.children', '.step-children', function () {
        $(this).removeClass('border-2 border-primary');
    });

    // 条件和循环步骤的子步骤区域放置事件
    $(document).off('drop.children').on('drop.children', '.step-children', function (e) {
        e.preventDefault();
        e.stopPropagation();
        $(this).removeClass('border-2 border-primary');

        if (draggedItemType === 'api') {
            const apiData = JSON.parse(e.originalEvent.dataTransfer.getData('text/plain'));

            // 创建API步骤，传入请求体和请求头
            const apiStep = createApiStep(apiData.name, apiData.id, apiData.name, apiData.method, apiData.url, apiData.body, apiData.headers);

            // 添加到子步骤列表
            $(this).append(apiStep);

            // 更新步骤序号
            updateStepNumbers();
        } else if (draggedItemType === 'step') {
            // 支持将步骤拖拽到条件和循环中
            const draggedElement = $(draggedItem);

            // 检查是否是从主步骤区域拖拽来的
            if (draggedElement.parent().attr('id') === 'steps-container' || draggedElement.closest('.step-children').length === 0) {
                $(this).append(draggedElement);

                // 更新步骤序号
                updateStepNumbers();

                // 为新添加的步骤绑定折叠功能
                if (typeof bindStepCollapseFunctionality === 'function') {
                    bindStepCollapseFunctionality();
                }
            }
        }
    });
}

// 获取拖动后的元素
function getDragAfterElement(container, y) {
    console.log('getDragAfterElement被调用:', {
        containerType: typeof container,
        isJQuery: container && typeof container === 'object' && 'jquery' in container,
        isDOMElement: container && typeof container === 'object' && 'nodeType' in container
    });

    // 确保container是原生DOM元素
    let nativeContainer;
    if (container && typeof container === 'object' && 'jquery' in container) {
        // 是jQuery对象
        console.log('传入的是jQuery对象，元素数量:', container.length);
        nativeContainer = container[0];
    } else if (container && typeof container === 'object' && 'nodeType' in container) {
        // 已经是原生DOM元素
        nativeContainer = container;
    } else {
        // 既不是jQuery对象也不是DOM元素
        console.error('无效的容器元素类型:', container);
        return null;
    }

    // 检查nativeContainer是否有效
    if (!nativeContainer || typeof nativeContainer.querySelectorAll !== 'function') {
        console.error('无效的原生容器元素:', nativeContainer);
        return null;
    }

    try {
        const draggableElements = [...nativeContainer.querySelectorAll('.step-item:not(.dragging)')];
        console.log('找到可拖动元素数量:', draggableElements.length);

        const result = draggableElements.reduce((closest, child) => {
            const box = child.getBoundingClientRect();
            const offset = y - box.top - box.height / 2;

            if (offset < 0 && offset > closest.offset) {
                return { offset: offset, element: child };
            } else {
                return closest;
            }
        }, { offset: Number.NEGATIVE_INFINITY }).element;

        console.log('getDragAfterElement返回结果:', result);
        return result;
    } catch (error) {
        console.error('getDragAfterElement执行出错:', error);
        return null;
    }
}

// 更新步骤序号
function updateStepNumbers() {
    // 更新主步骤序号
    let counter = 1;

    // 使用更通用的选择器，确保找到所有顶级步骤
    $('#scene-steps .step-item').not('.step-children .step-item').each(function () {
        $(this).find('.step-number').text(counter);

        // 更新子步骤序号
        updateChildStepNumbers($(this), `${counter}`);
        counter++;
    });
}

// 更新子步骤序号
function updateChildStepNumbers(parentStep, parentNumber) {
    let counter = 1;

    parentStep.find('.step-children > .step-item').each(function () {
        const stepNumber = `${parentNumber}.${counter}`;
        $(this).find('.step-number').text(stepNumber);

        // 递归更新子子步骤
        updateChildStepNumbers($(this), stepNumber);
        counter++;
    });
}

// 收集步骤数据
function collectStepsData() {
    const steps = [];

    // 收集主步骤 - 修改选择器以适应嵌套结构
    $('#scene-steps .step-item').not('.step-children .step-item').each(function () {
        const step = collectStepData($(this));
        steps.push(step);
    });

    return steps;
}

// 收集单个步骤数据
function collectStepData(stepElement) {
    const type = stepElement.data('type');
    const stepId = stepElement.data('id');
    const name = stepElement.find('.step-name').first().val();

    const step = {
        id: stepId,
        type: type,
        name: name,
        config: {}  // 初始化config对象
    };

    // 根据步骤类型收集特定数据
    switch (type) {
        case 'api':
            step.api_id = stepElement.data('api-id');
            step.method = stepElement.find('.step-method').first().val();
            step.url = stepElement.find('.step-url').first().val();
            // 收集请求体信息
            const bodyJson = stepElement.find('.step-body-json').first().val();
            if (bodyJson) {
                try {
                    step.config.body = JSON.parse(bodyJson);
                    // 为了向后兼容，同时设置body字段
                    step.body = step.config.body;
                } catch (e) {
                    console.warn('请求体JSON解析失败:', e);
                    step.config.body = bodyJson;
                    step.body = bodyJson;
                }
            }
            // 收集请求头信息
            const headersJson = stepElement.find('.step-headers-json').first().val();
            if (headersJson) {
                try {
                    step.config.headers = JSON.parse(headersJson);
                    // 为了向后兼容，同时设置headers字段
                    step.headers = step.config.headers;
                } catch (e) {
                    console.warn('请求头JSON解析失败:', e);
                    step.config.headers = headersJson;
                    step.headers = headersJson;
                }
            }
            break;
        case 'script':
            step.script = stepElement.find('.step-script').first().val();
            break;
        case 'condition':
            step.condition = stepElement.find('.step-condition').first().val();

            // 收集子步骤
            step.children = [];
            stepElement.find('.step-children > .step-item').each(function () {
                const childStep = collectStepData($(this));
                step.children.push(childStep);
            });
            break;
        case 'loop':
            step.loop_type = stepElement.find('.step-loop-type').first().val();

            if (step.loop_type === 'count') {
                step.loop_count = stepElement.find('.step-loop-count').first().val();
            } else if (step.loop_type === 'while') {
                step.loop_condition = stepElement.find('.step-loop-condition').first().val();
            } else if (step.loop_type === 'foreach') {
                step.loop_collection = stepElement.find('.step-loop-collection').first().val();
            }

            // 收集子步骤
            step.children = [];
            stepElement.find('.step-children > .step-item').each(function () {
                const childStep = collectStepData($(this));
                step.children.push(childStep);
            });
            break;
    }

    return step;
}

// 运行场景
function runScene(sceneId) {
    // 加载环境列表
    $.ajax({
        url: '/environment/data',
        method: 'GET',
        success: function (response) {
            if (response.environments && response.environments.length > 0) {
                // 显示环境选择对话框
                showEnvironmentSelector(sceneId, response.environments);
            } else {
                // 直接使用默认环境运行
                executeScene(sceneId);
            }
        },
        error: function (error) {
            console.error('加载环境列表失败:', error);
            // 直接使用默认环境运行
            executeScene(sceneId);
        }
    });
}

// 显示环境选择器
function showEnvironmentSelector(sceneId, environments) {
    // 创建环境选择对话框
    const modal = $(`
        <div class="modal fade" id="environmentModal" tabindex="-1" aria-hidden="true">
            <div class="modal-dialog">
                <div class="modal-content">
                    <div class="modal-header">
                        <h5 class="modal-title">选择运行环境</h5>
                        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                    </div>
                    <div class="modal-body">
                        <div class="form-group">
                            <label for="environment-select">环境</label>
                            <select class="form-control" id="environment-select">
                                ${environments.map(env => `<option value="${env.id}">${env.name}</option>`).join('')}
                            </select>
                        </div>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">取消</button>
                        <button type="button" class="btn btn-primary" id="run-with-env-btn">运行</button>
                    </div>
                </div>
            </div>
        </div>
    `);

    // 添加到页面
    $('body').append(modal);

    // 显示模态框
    const modalInstance = new bootstrap.Modal(document.getElementById('environmentModal'));
    modalInstance.show();

    // 运行按钮点击事件
    $('#run-with-env-btn').click(function () {
        const environmentId = $('#environment-select').val();

        // 关闭模态框
        modalInstance.hide();

        // 执行场景
        executeScene(sceneId, environmentId);

        // 移除模态框
        setTimeout(() => {
            $('#environmentModal').remove();
        }, 500);
    });

    // 模态框关闭事件
    $('#environmentModal').on('hidden.bs.modal', function () {
        // 移除模态框
        $(this).remove();
    });
}

// 执行场景
function executeScene(sceneId, environmentId = null) {
    const requestData = {
        environment_id: environmentId
    };

    $.ajax({
        url: `/scene/${sceneId}/run`,
        method: 'POST',
        contentType: 'application/json',
        data: JSON.stringify(requestData),
        success: function (response) {
            if (response.success) {
                showToast('success', response.message || '场景执行已开始');

                // 跳转到执行记录页面
                if (response.record_id) {
                    window.location.href = `/record#${response.record_id}`;
                }
            } else {
                showToast('error', response.message || '场景执行失败');
            }
        },
        error: function (error) {
            console.error('场景执行失败:', error);
            showToast('error', '场景执行失败');
        }
    });
}